<template>
	<view class="taiji-page">
		<uni-notice-bar show-icon scrollable :text="dec" />
		
		<uni-section class="hideOnPc" title="太极" type="line"></uni-section>
		<view :class="['flex','rotate', isfan? 'fanRote':'']" :style="`animation-duration: ${sped}s;`">
			<image src="../../static/h5/yy.png" mode="widthFix" class=""></image>
		</view>
		<view class="flex p20">
			<text class="font18">{{(2000/sped).toFixed(2)}}</text><text>r/s</text>
		</view>
		<uni-section title="自定义" type="line" padding>
		</uni-section>
		<view class="flex">
			顺时针&nbsp<switch :checked="isfan" color="#000" @change="isfanChange" />&nbsp逆时针
			<view class="p20">
				
			</view>
			<view style="transform: scale(1.5,1.5);">
				<uni-number-box min="1" max="2000" :value="1" :step="1" v-model="sped"/>
			</view>
		</view>
		<uni-section class="hideOnPc" :title="`低速`" type="line"></uni-section>
		<view class="flex flex-between p20">
			<text>快</text>
			<view class="" style="flex:1">
				<slider value="100" show-value @change="sliderChange" min="100" max="2000" activeColor="#0a8b4b"
					backgroundColor="#b5b4aa" block-color="#a394f4" block-size="24" />
			</view>
			<text>慢</text>
		</view>
		<uni-section class="hideOnPc" :title="`高速`" type="line"></uni-section>
		<view class="flex flex-between p20">
			<text>快</text>
			<view class="" style="flex:1">
				<slider value="100" @change="sliderChange" min="1" max="100" show-value activeColor="#0a8b4b"
					backgroundColor="#b5b4aa" block-color="#a394f4" block-size="24" />
			</view>
			<text>慢</text>
		</view>
		
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const isfan = ref(false)
	const sped = ref(1)
	const dec = '太极生两仪，四象生八卦，六道轮回，两仪生四象，三生万物，三善道、三恶道，五行相生相克，物极必反，否极泰来，阴极生阳，阳极生阴，阴阳调和，万物归一，起点亦是终点，终点亦是新的起点。'
	const isfanChange = (val) => {
		isfan.value = val.detail.value
	}
	const sliderChange = (val) => {

		sped.value = val.detail.value
		console.log(val.detail.value);
	}
</script>

<style>
	.taiji-page {
		height: 100vh;
		overflow: auto;
		padding-bottom: 200rpx;
		/* background-color: #e1e1e1; */
	}

	.rotate {
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-name: rotate;
	}

	.fanRote {
		animation-name: rotate2;
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(720000deg);
		}
	}

	@keyframes rotate2 {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(-720000deg);
		}
	}
</style>